<template>
    <div style="padding: 10px;">
        <el-form :model="queryParams" ref="queryForm" class="queryForm" :inline="true" v-show="showSearch"
                 @submit.native.prevent>
            <el-form-item label="分类名称" desc="分类名称" prop="name">
                <el-input v-model.trim="queryParams.name" placeholder="分类名称" clearable size="small" style="width:120px;"
                          @keyup.enter.native="handleQuery" />
            </el-form-item>
            <!--    <el-form-item label="所属上级类别[关系=SysClass]" desc="所属上级类别[关系=SysClass]" prop="parentId">
                    <el-input v-model.trim="queryParams.parentId" placeholder="所属上级类别[关系=SysClass]" clearable size="small"
                              style="width:120px;" @keyup.enter.native="handleQuery" />
                </el-form-item>-->
            <!--      <el-form-item label="所有分类路径" desc="所有分类路径" prop="parentIdPath">
                      <el-input v-model.trim="queryParams.parentIdPath" placeholder="所有分类路径" clearable size="small"
                                style="width:120px;" @keyup.enter.native="handleQuery" />
                  </el-form-item>-->
                   <el-form-item label="拓展类型" desc="拓展类型" prop="expendType">
                       <dic-select v-model="queryParams.expendType" :code="dicInner.sys_class_expendType" placeholder="拓展类型"
                                   clearable size="small" style="width:120px;" @keyup.enter.native="handleQuery" />
                   </el-form-item>
            <!--  <el-form-item label="类别深度" desc="类别深度" prop="deep">
                  <el-input v-model.trim="queryParams.deep" placeholder="类别深度" clearable size="small" style="width:120px;"
                            @keyup.enter.native="handleQuery" />
              </el-form-item>-->
            <!--         <el-form-item label="分类类型名称" desc="分类类型名称" prop="typeInfo">
                         <dic-select v-model="queryParams.typeInfo" :code="dicInner.sys_class_typeInfo" placeholder="分类类型名称"
                                     clearable size="small" style="width:120px;" @keyup.enter.native="handleQuery" />
                     </el-form-item>-->
            <!--  <el-form-item label="分类图片[查询]" desc="分类图片[查询]" prop="img">
                  <el-input v-model.trim="queryParams.img" placeholder="分类图片[查询]" clearable size="small"
                            style="width:120px;" @keyup.enter.native="handleQuery" />
              </el-form-item>-->
            <!--<el-form-item label="排序号" desc="排序号" prop="orderNum">
                <el-input v-model.trim="queryParams.orderNum" placeholder="排序号" clearable size="small"
                          style="width:120px;" @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="信息级别" desc="信息级别 0系统级 10租户级" prop="infoLevel">
                <el-input v-model.trim="queryParams.infoLevel" placeholder="信息级别 0系统级 10租户级" clearable size="small"
                          style="width:120px;" @keyup.enter.native="handleQuery" />
            </el-form-item>-->
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @submit.native.prevent @click="handleQuery">
                    搜索
                </el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5" class="buttonsRow">
                <el-button type="primary" size="small" plain @click="()=>triggerModify()">新增</el-button>
            </el-col>
            <right-toolbar @layout="(_obj)=>columnsHidden=_obj" :showSearch.sync="showSearch"
                           @queryTable="getInfoList"></right-toolbar>
        </el-row>
        <section class="tablecontainer">
            <el-table border ref="multipleTable" :data="dataList"
            size="mini" class="tabletop" tooltip-effect="dark"
                      row-key="id"
                      :tree-props="{children: 'children', hasChildren: 'haveNext'}"
                      style="width: 100%"
                      @selection-change="rows=>{         selectRows=rows      }"
                      @row-click="row=>{          tableRowClickOnece(row,'multipleTable')      }"
                      :row-class-name="tableRowClassName"
                      :lazy="true"
                      :load="load"
            >
                <el-table-column type="selection" width="40" align="center"></el-table-column>
                <el-table-column label="编号" width="66" align="center"></el-table-column>
                <el-table-column label="操作" width="55" align="center">
                    <template slot-scope="scope">
                        <el-popover placement="top-start" title="操作" width="222" trigger="hover">
                            <div>
                                <el-button size="mini" type="text" icon="el-icon-edit"
                                           @click="()=>triggerModify(scope.row)"> 修改
                                </el-button>
                                <el-button size="mini" type="text" icon="el-icon-edit"
                                           @click="()=>triggerAddChildModify(scope.row)"> 添加子集
                                </el-button>
                                <el-button size="mini" type="text" icon="el-icon-notebook-1"
                                           @click="()=>openLog(scope.row)">变更日志
                                </el-button>
                                <el-button size="mini" type="text" icon="el-icon-delete"
                                           @click="()=>handleDelete(scope.row)">删除
                                </el-button>
                            </div>
                            <el-button slot="reference" type="text">操作</el-button>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column v-if="!columnsHidden['name']" label="分类名称" prop="name" min-width="120px;">
                    <template slot-scope="scope">
                        <div> {{scope.row.name}}</div>
                    </template>
                </el-table-column>
                <!--   <el-table-column v-if="!columnsHidden['parentId']" label="所属上级类别[关系=SysClass]" prop="parentId"
                                    min-width="120px;">
                       <template slot-scope="scope">
                           <div> {{scope.row.parentId}}</div>
                       </template>
                   </el-table-column>-->
                <!--     <el-table-column v-if="!columnsHidden['parentIdPath']" label="所有分类路径" prop="parentIdPath"
                                      min-width="120px;">
                         <template slot-scope="scope">
                             <div> {{scope.row.parentIdPath}}</div>
                         </template>
                     </el-table-column>-->
                <!--     <el-table-column v-if="!columnsHidden['expendType']" label="拓展类型" prop="expendType" min-width="120px;">
                         <template slot-scope="scope">
                             <dic-tag :code="dicInner.sys_class_expendType" v-model="scope.row.expendType"></dic-tag>
                         </template>
                     </el-table-column>-->
                <!--   <el-table-column v-if="!columnsHidden['deep']" label="类别深度" prop="deep" min-width="120px;">
                       <template slot-scope="scope">
                           <div> {{scope.row.deep}}</div>
                       </template>
                   </el-table-column>-->
                <!--  <el-table-column v-if="!columnsHidden['typeInfo']" label="分类类型名称" prop="typeInfo" min-width="120px;">
                      <template slot-scope="scope">
                          <dic-tag :code="dicInner.sys_class_typeInfo" v-model="scope.row.typeInfo"></dic-tag>
                      </template>
                  </el-table-column>-->
                <!--    <el-table-column v-if="!columnsHidden['img']" label="分类图片[查询]" prop="img" min-width="120px;">
                        <template slot-scope="scope">
                            <div> {{scope.row.img}}</div>
                        </template>
                    </el-table-column>-->
                <el-table-column v-if="!columnsHidden['orderNum']" label="排序号" prop="orderNum" min-width="120px;">
                    <template slot-scope="scope">
                        <div> {{scope.row.orderNum}}</div>
                    </template>
                </el-table-column>
                <!--   <el-table-column v-if="!columnsHidden['infoLevel']" label="信息级别" prop="infoLevel" min-width="120px;">
                       <template slot-scope="scope">
                           <div> {{scope.row.infoLevel}}</div>
                       </template>
                   </el-table-column>-->
                <el-table-column label="添加时间/人" prop="add_time/add_user" v-if="!columnsHidden['add_time/add_user']">
                    <template slot-scope="scope">
                        <span>{{scope.row.addTime|dateFormatYYYYMMDD}}/{{scope.row.addUser}}</span></template>
                </el-table-column>
                <el-table-column label="更新时间/人" prop="lastEditTime/editUser"
                                 v-if="!columnsHidden['lastEditTime/editUser']">
                    <template slot-scope="scope"><span>{{scope.row.lastEditTime|dateFormatYYYYMMDD}}/{{scope.row.editUser}}</span>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination :background="true" style="padding: 20px;" :current-page.sync="queryParams.pageNum"
                           :page-size="queryParams.pageSize" layout="prev, pager, next" :total="total"
                           @size-change="(pageSize)=>{$data.queryParams.pageSize=pageSize;dataList=[];getInfoList();}"
                           @current-change="(pageNum)=>{$data.queryParams.pageNum=pageNum;dataList=[];getInfoList();}"></el-pagination>
        </section>
    </div>
</template>
<script>  import { formData, formMethod, PageData } from '@/utils/formcommon';
import { getUrlParam, dateFormatYYYYMMDD } from '@/utils/index';
import { default as FormDialog } from '@codegenarate/mydialogplus';
import * as  api from '@/apis/sysClass.api.js';

const dicInner = {
  '___sys_class_id': '主键ID',
  'sys_class_id': 'sys_class_id',
  '___sys_class_name': '分类名称',
  'sys_class_name': 'sys_class_name',
  '___sys_class_parentId': '所属上级类别[关系=SysClass]',
  'sys_class_parentId': 'sys_class_parentId',
  '___sys_class_parentIdPath': '所有分类路径',
  'sys_class_parentIdPath': 'sys_class_parentIdPath',
  '___sys_class_expendType': '拓展类型',
  'sys_class_expendType': 'sys_class_expendType',
  '___sys_class_deep': '类别深度',
  'sys_class_deep': 'sys_class_deep',
  '___sys_class_typeInfo': '分类类型名称',
  'sys_class_typeInfo': 'sys_class_typeInfo',
  '___sys_class_img': '分类图片[查询]',
  'sys_class_img': 'sys_class_img',
  '___sys_class_orderNum': '排序号',
  'sys_class_orderNum': 'sys_class_orderNum',
  '___sys_class_remarks': '备注',
  'sys_class_remarks': 'sys_class_remarks',
  '___sys_class_infoLevel': '信息级别 0系统级 10租户级',
  'sys_class_infoLevel': 'sys_class_infoLevel',
  '___sys_class_tenantType': '租户类型 1应用管理者2应用消息者',
  'sys_class_tenantType': 'sys_class_tenantType',
  '___sys_class_tenantId': '租户ID',
  'sys_class_tenantId': 'sys_class_tenantId',
  '___sys_class_delState': '有效状态[数据字典=del_state] 1有效  5删除',
  'sys_class_delState': 'sys_class_delState',
  '___sys_class_addUser': '添加人',
  'sys_class_addUser': 'sys_class_addUser',
  '___sys_class_addUserId': '添加人ID',
  'sys_class_addUserId': 'sys_class_addUserId',
  '___sys_class_addTime': '添加时间',
  'sys_class_addTime': 'sys_class_addTime',
  '___sys_class_editUser': '最近更新人',
  'sys_class_editUser': 'sys_class_editUser',
  '___sys_class_editUserId': '最近更新人ID',
  'sys_class_editUserId': 'sys_class_editUserId',
  '___sys_class_lastEditTime': '最近更新时间',
  'sys_class_lastEditTime': 'sys_class_lastEditTime',
  '___sys_class_serverNumber': '服务器编号ID',
  'sys_class_serverNumber': 'sys_class_serverNumber',
};
export default {
  name: 'sysClasslist',
  data() {
    return {
      api: api,
      dicInner, ...formData,
      queryParams: {
        searchKey: '',
        'id': '',
        'name': '',
        'parentId': '',
        'parentIdPath': '',
        'expendType': '',
        'deep': '',
        'typeInfo': '',
        'img': '',
        'orderNum': '',
        'remarks': '',
        'infoLevel': '',
        'tenantType': '',
        'tenantId': '',
        'delState': '',
        'addUser': '',
        'addUserId': '',
        'addTime': '',
        'editUser': '',
        'editUserId': '',
        'lastEditTime': '',
        'serverNumber': '', ...PageData,
      },
      lists: [],
      selectRows: [],
      classId: '',
      classIdPath: '',
      className: '',
      loading: false,
      isFold: false,
      tableRowClassName({ row, rowIndex }) {
        if (row.rowType == 'total') {
          return 'total-row';
        }
        return '';
      },
    };
  },
  components: {
    svgIcon: () => import('@codegenarate/svg-icon'),
    dicSelect: () => import('@/components/DicSelect/index.vue'),
    dicTag: () => import('@/components/DicSelect/dic-tag.vue'),
    RightToolbar: () => import('@/components/RightToolbar/index.vue'),
    modify: () => import('./modify'),
  },
  mounted() {
    if (this.$props['immediate']) {
      this.queryParams.typeInfo = getUrlParam('typeInfo') || '';
      this.queryParams.parentId = 0;
      this.getInfoList();
    }
  },
  filters: { dateFormatYYYYMMDD: dateFormatYYYYMMDD },
  computed: {},
  watch: {},
  props: {
    immediate: {
      type: [Boolean], default() {
        return true;
      },
    },
  },
  methods: {
    ...formMethod,
    /**     * @description:     * @params _data.dataList     * @return     */    initByDialog(_data) {
      this.dataList = _data && _data.dataList || [];
    },
    async load(treeData, treeNode, resolve) {
      var params = {
        pageNum: 1,
        pageSize: 100,
        parentId: treeData&&treeData.id,
      };
      var result = await api.getList(params);
      resolve(result && result.data || []);
    },
    
    tableRowClickOnece(row, tableRef, options) {
      var table = this.$refs[tableRef];
      if (options && options.canSelect) {
        var istrue = options.canSelect(row);
        if (!istrue) {
          table && table.toggleRowSelection(row, false);
        }
      }
      table && table.clearSelection();
      table && table.toggleRowSelection(row);
    },
    async triggerAddChildModify(parentRow) {
      var self = this;
      var result = await FormDialog({
        width: '888px',
        title: '添加子集',
        data() {
          return {
            parentId: parentRow.id,
            parentName: parentRow.name,
            typeInfo: self.queryParams.typeInfo,
          };
        },
        components: { modify: () => import('./modify.vue') },
      });
      if (!(result && result.success)) {
        return result;
      }
      this.getInfoList();
    },
    
    async triggerModify(row) {
      var self = this;
      var result = await FormDialog({
        width: '888px', title: row && row.id ? '编辑分类' : '新增分类', data() {
          return {
            ...row,
            typeInfo: self.queryParams.typeInfo,
          };
        }, components: { modify: () => import('./modify.vue') },
      });
      if (!(result && result.success)) {
        return result;
      }
      this.getInfoList();
    },
  },
};</script>
